<!DOCTYPE html>
<html lang="zh">
<head>
  <title>滚动条：ion-scroll</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  <link rel="stylesheet" href="../../lib/ionic/css/ionic.min.css">
</head>
<body ng-app="starter">
<ion-header-bar class="bar-positive">
  <h4>这里是头部</h4>
</ion-header-bar>

<ion-content>
  <div>
    <h4 class="text-center">中国地图战士</h4>
    <p style="width:300px;height:150px;">
      。。。。。
    </p>
  </div>
  <!--NOTE
      prop delegate-handle str 标识带有$ionicScrollDelegate的滚动视图
      prop direction x|y 设置滚动方向
      prop paging bool 设置滚动是否限制分页
      prop scrollbar-x bool 是否显示水平滚动条。默认为true
      prop scrollbar-y bool 是否显示垂直滚动条。默认为true
      prop zooming bool 是否支持双指缩放
      prop min-zoom number 允许的最小缩放值。默认为0.5
      prop max-zoom number 允许的最大缩放值。默认为3
      event on-refresh exp
      event on-scroll exp
  -->
  <ion-scroll direction="xy" scrollbar-y="true"
              style="width:500px;height:300px"/>
  <div style="width:1005px;height:568px; background: url('img/demo10-3/map.jpg') no-repeat"></div>
</ion-content>

<ion-footer-bar class="bar-positive">
  <h4>这里是底部</h4>
</ion-footer-bar>

<script src="../../lib/ionic/js/ionic.bundle.js"></script>
<script src="../../js/app.js"></script>
</body>
</html>
